<template>
    <div class="view-content">
        <div class="view-list">
            <div class="view-item" v-for="(item, i) in mainRef.viewList" :key="i">
                <div class="xy-view view-container">
                    <div class="view-item__header" v-if="typeof(item.list) !== 'undefined'">
                        <pui-popper theme="light" @onClose="clickOutsideHandle" @onOpen="toggleOpen(i)" placement="bottom">
                            <div class="arrow_icon">
                                {{ item.title }}<pui-icon class="pui-toolbar_item_arrow" name="triangle-down"></pui-icon>
                            </div>
                            <template #popper>
                                <div class="pui-selector-content">
                                    <div class="pui-selector-content_list">
                                        <div class="pui-selector-content_item" v-for="(ditem, di) in item.list" :key="di" @click.stop="changeFigure(item, ditem)">
                                            <div class="content-label">{{ditem?.title}}</div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </pui-popper>
                        <pui-button style="margin-left: 10px;" type="text" @click="showEditDirection({type: item.type, edit: item.edit})">{{ item.edit }}=μm</pui-button>
                    </div>
                    <div class="view-item__header" v-else>
                        <span class="title">
                            {{ item.title }}<pui-button style="margin-left: 10px;" type="text"  v-if="!item.list" @click="showEditDirection({type: item.type, edit: item.edit})">{{ item.edit }}方向</pui-button>
                        </span>
                    </div>
                    <div class="view-item__content" v-if="figures[item.type]">
                        <img :key="item.type + '--' + updateKey" :src="figures[item.type].path + '?timestr='+new Date().getTime()"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'ViewContent'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, ref, nextTick } from 'vue'
import { deviceManager } from '@/services/phot_client/device'
const { proxy } = getCurrentInstance() as any
const updateKey = ref(0);
const mainRef = reactive({
    viewList: [{title: '光场图-XY', type: 'Field_z', edit: 'z'},
    {title: '折射率-XY', type: 'Refractive_z', edit: 'z'},
    {title: '光场图-XZ', type: 'Field_y', edit: 'y', list: [{title: '光场图-XZ', type: 'Field_y', edit: 'y'},{title: '光场图-YZ', type: 'Field_x', edit: 'x'}]},
    {title: '折射率-XZ', type: 'Refractive_y', edit: 'y', list: [{title: '折射率-XZ', type: 'Refractive_y', edit: 'y'},{title: '折射率-YZ', type: 'Refractive_x', edit: 'x'}]}],
    figures: {} as any,
    isShow: false,
    currentIndex: ''
})
const figures: any = ref({})
const init = async () => {
    updateKey.value += 1
    figures.value = {}
    mainRef.figures = deviceManager.figures.get(deviceManager.photGridId)
    figures.value = deviceManager.figures.get(deviceManager.photGridId)
    await nextTick()
    console.log(mainRef.figures)
}
const clickOutsideHandle = () => {
    mainRef.isShow = false
    mainRef.currentIndex = ''
}
const toggleOpen = (idx:any) => {   
    mainRef.currentIndex = idx
    mainRef.isShow = !mainRef.isShow
}
const changeFigure = (data1: any, data2: any) => {
    data1.title = data2.title
    data1.type = data2.type
    data1.edit = data2.edit
}
const changeFigureFromHistory = (data: any) => {
    console.log(data)
    mainRef.figures = data
    figures.value = data
}

const showEditDirection = (e: any) => {
    proxy.$parent.$refs.DirectionDialogRef.init(e)
}

defineExpose({
    init,
    changeFigureFromHistory
})
</script>